<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家族树</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .tree-container {
            width: 100%;
            height: 600px;
            border: 1px solid #ddd;
            border-radius: 5px;
            overflow: auto;
        }
        .node circle {
            fill: #fff;
            stroke: steelblue;
            stroke-width: 2px;
        }
        .node text {
            font: 12px sans-serif;
        }
        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 1.5px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">家族管理系统</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="#">家族树</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/member/profile">个人资料</a>
                </li>
            </ul>
            <form th:action="@{/logout}" method="post">
                <button type="submit" class="btn btn-outline-light">退出</button>
            </form>
        </div>
    </div>
</nav>

<div class="container mt-4">
    <h2>家族树</h2>
    <div class="tree-container" id="tree-container"></div>
</div>

<script>
    // 这里使用D3.js渲染家族树
    // 实际项目中应从后端获取数据
    const data = {
        name: "祖父",
        children: [
            {
                name: "父亲",
                children: [
                    { name: "我" },
                    { name: "兄弟" }
                ]
            },
            {
                name: "叔叔",
                children: [
                    { name: "堂兄" },
                    { name: "堂妹" }
                ]
            }
        ]
    };

    const width = 800;
    const height = 500;

    const svg = d3.select("#tree-container")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

    const g = svg.append("g")
        .attr("transform", "translate(50,50)");

    const treeLayout = d3.tree().size([width-100, height-100]);

    const root = d3.hierarchy(data);
    treeLayout(root);

    // 绘制连接线
    g.selectAll(".link")
        .data(root.links())
        .enter()
        .append("path")
        .attr("class", "link")
        .attr("d", d3.linkVertical()
            .x(d => d.x)
            .y(d => d.y));

    // 绘制节点
    const node = g.selectAll(".node")
        .data(root.descendants())
        .enter()
        .append("g")
        .attr("class", "node")
        .attr("transform", d => `translate(${d.x},${d.y})`);

    node.append("circle")
        .attr("r", 10);

    node.append("text")
        .attr("dy", ".35em")
        .attr("y", d => d.children ? -20 : 20)
        .style("text-anchor", "middle")
        .text(d => d.data.name);
</script>
</body>
</html>